<template>
	<view>
		<u-popup 
			v-model="isWechat" 
			mode="bottom" 
			length="100%" 
			closeable
			close-icon-pos="top-left" 
			@close="close"
			>
			<!-- close-icon="close-circle"
			close-icon-size="60" -->
			<view class="login-wechat">
				<view class="header">
					<view class="logo">
						<image src="/static/images/logo.png" style="width: 240rpx;height: 240rpx;" mode="widthFix"></image>
					</view>
				</view>
				<view class="btn-group u-p-b-80">
					<view class="tips u-p-b-10">
						<u-checkbox v-model="agree" size="28"></u-checkbox>
						<text class="u-font-24 u-tips-color" @click="agree = !agree">我已阅读并同意</text>
						<view class="text">
							<navigator class="u-font-24" url="/pages/home/regAgreement/regAgreement">《服务协议》</navigator>
						</view>
						<text class="u-font-24">及</text>
						<view class="text">
							<navigator class="u-font-24" url="/pages/home/privacyPolicy/privacyPolicy">《隐私政策》</navigator>
						</view>
					</view>
					<!-- <u-button v-if="agree == false" class="btn" type="success" @click="show = true">
						<text class="u-p-l-10">登录前请阅读协议</text>
					</u-button>
					<u-button v-else class="btn" type="success" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
						<text class="u-p-l-10">手机号快捷登录</text>
					</u-button> -->
					<u-button class="btn" type="success" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
						<text class="u-p-l-10">手机号快捷登录</text>
					</u-button>
					<button class="btn sp u-m-t-30" @click="otherLogin">输入手机号码登录/注册</button>
					<!-- <view class="u-p-t-40">
						<u-icon name="close-circle-fill" color="#c9cdd5" size="180" @click="close"></u-icon>
					</view> -->
				</view>
			</view>
		</u-popup>
		
		<u-modal v-model="show" :confirm-style="{'color': '#10beca'}" :show-cancel-button="true" title="温馨提示" confirm-text="同意" cancel-text="不同意" width="600" @cancel="show = false" @confirm="agreeConfirm">
			<view class="tips u-p-l-20 u-p-r-20 u-m-t-30 u-m-b-30">
				<text class="u-font-24 u-tips-color">登录前请您先阅读青猿回收</text>
				<view class="text">
					<navigator class="u-font-24" url="/pages/home/regAgreement/regAgreement">《服务协议》</navigator>
				</view>
				<text class="u-font-24">及</text>
				<view class="text">
					<navigator class="u-font-24" url="/pages/home/privacyPolicy/privacyPolicy">《隐私政策》</navigator>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name:"login-wechat",
		props: ["isWechat"],
		data() {
			return {
				agree: false,
				show: false,
				phonecode: ''
			};
		},
		methods:{
			onGetPhoneNumber(e) {
				console.log("用户点击微信登录按钮:",e.detail.errMsg)
				// #ifdef MP-WEIXIN
				wx.reportEvent("login_wechat", {
					"type": "",
					"mobile": "",
					"usename": "用户点击微信登录按钮"
				})
				// #endif
				
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					this.phonecode = e.detail.code
					if(this.agree == false){
						this.show = true
						return
					}else{
						this.weixinLogin()
					}
				} else {
					console.log('您拒绝获取手机号码')
					// uni.showToast({
					// 	title: '您拒绝了获取手机号码',
					// 	icon: 'none'
					// })
				}
			},
			weixinLogin(){
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (res) => {
						if (res.code) {
							this.$u.get('/User/Account/WXLoginOrReg', {
								code: res.code,
								phonecode: this.phonecode
							}).then((res) => {
								console.log('/User/Account/WXLoginOrReg',res)
								uni.removeStorageSync('lifeData');
								this.$u.vuex('Authorization', res.token)
								this.$u.vuex('userdetail', {
									userid: res.userid
								})
								this.$store.dispatch('getDetails').then((res)=>{
									console.log('微信登录后获取用户详情：',res)
									uni.showToast({
										title: '登录成功'
									})
									this.close()
									this.update()
								}).catch((err)=>{
									console.log('err',err)
								})
							})
						} else {
							console.log('登录失败！' + res.errMsg)
							uni.showToast({
								title: '登录失败',
								icon: 'none'
							})
						}
					}
				})
			},
			// 更新注册位置
			updateLat(){
				// 更新位置
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	success: (res)=> {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 		this.$u.post('/User/UpdateLat',{
				// 			lng: res.longitude,
				// 			lat: res.latitude
				// 		})
				// 	}
				// });
			},
			otherLogin(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
				this.close()
				// #ifdef MP-WEIXIN
				wx.reportEvent("log_other", {
				  "role": "用户点击其他登录按钮"
				})
				// #endif
			},
			agreeConfirm(){
				this.agree = true
				this.weixinLogin()
			},
			close(){
				this.$emit('close', false)
			},
			update(obj){
				this.$emit('update',obj)
			}
		}
	}
</script>

<style lang="scss">
	:v-deep{
		.u-close--top-left {
			top: calc(60rpx + var(--status-bar-height));
			left: 30rpx;
		}
	} 
	.header {
		margin-top: 88px;
		padding-top: var(--status-bar-height);

		.logo {
			width: 240rpx;
			height: 268rpx;
			margin: 0 auto;
			text-align: center;
			color: $u-type-error;

			// background-image: url("@/static/images/logo.png");
			// background-position: center;
			// background-size: cover;
			.iconfont {
				font-size: 140rpx;
			}
		}

		.title {
			font-size: 50rpx;
			text-align: center;
			margin-top: 20rpx;
		}

		.title1 {
			font-size: 35rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	}
	
	.tips {
		// display: flex;
		font-size: 24rpx;
		// justify-content: center;
		align-items: center;
		width: 600rpx;
		margin-bottom: 10rpx;

		.text {
			color: $u-color-blue;
			display: inline-block;
		}
	}

	// .footer {
	// 	text-align: center;
	// 	color: $u-color-grey;
	// 	padding-bottom: 60rpx;
	// 	padding-top: 30rpx;

	// 	.ico {
	// 		color: $u-color-green;
	// 	}

	// 	.tips {
	// 		display: flex;
	// 		font-size: 24rpx;
	// 		justify-content: center;
	// 		align-items: baseline;
	// 		margin-top: 40rpx;

	// 		.tipser {
	// 			.text {
	// 				color: $u-color-blue;
	// 				display: inline-block;
	// 			}
	// 		}
	// 	}
	// }
	.login-wechat {
		min-height: 100vh;
		width: 100vw;
		background-color: white;
		padding: 40rpx 80rpx;
		border: 1px solid white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	
		.btn-group {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.btn {
				width: 600rpx;
				&.sp{
					border: 0;
					background: rgba(0, 0, 0, 0);
					font-size: 14px;
					line-height: inherit;
					padding: 0;
					text-align: center;
					color: $u-tips-color;
					
					&:after {
						display: none;
					}
				}
			}
		}
	}
</style>